import React, { useEffect, useRef } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import avatar from '../asset/images/avatar.png';
import { imageUri } from '../constants/Uri';
import icon_setting from '../asset/images/icon_setting.png';


function ImageDemo() {
  const imageRef = useRef(null);
  useEffect(() => {
    Image.getSize('xxx.png', (width, height) => {
      console.log(`width=${width}, height=${height}`);
    }, (error) => {
      console.log(error);
    });

    Image.prefetch(imageUri).then(data => {
      console.log(data);
    }).catch(e => {
      console.log(e);
    })

  }, []);


  return (
    <View style={styles.root}>
      <Image
        ref={imageRef}
        style={styles.img}
        source={icon_setting}
        defaultSource={avatar}
      // source={avatar} // 本地图片
      // source={{ uri: imageUri }} // 网络图片
      // blurRadius={1} // 模糊效果
      />
    </View>
  )
}


const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#F5F5F5'
  },
  img: {
    width: 160,
    height: 120,
    resizeMode: 'contain',
    tintColor: 'blue'
  },
});

export default ImageDemo